<template>
<view class="container">
  <template v-if="!loading">
    <view class="box" >
      <view class="goods-info">
        <view class="goods" v-for="(item,i) in orderDetail.orderGoods" :key="i">
          <view class="goodsImage">
            <image :src="item.picUrl" mode="aspectFill"></image>
          </view>
          <view class="goodsInfo">
            <view class="goodsName">
              <text>{{ item.goodsName }}</text>
              <text class="price">￥{{ item.price }}</text>
            </view>
            <view class="goodsSpec">
              <view>
                <view>规格：{{ item.specifications[0] }}</view>
  <!--              <view class="integral">产业积分：100</view>-->
              </view>
              <view class="number">x {{item.number}}</view>
            </view>
          </view>
        </view>
        <view class="item">
          <view class="label">商品总价</view>
          <view class="value">￥{{ orderDetail.orderInfo.goodsPrice }}</view>
        </view>
        <view class="item">
          <view class="label">运费</view>
          <view class="value">￥{{ orderDetail.orderInfo.freightPrice }}</view>
        </view>
        <view class="item">
          <view class="label">实付款</view>
          <view class="value red">￥{{ orderDetail.orderInfo.actualPrice }}</view>
        </view>
        <view class="item">
          <view class="label">支付类型</view>
          <view class="value red">{{ orderDetail.orderInfo.payType == 1 ? '在线支付' : '线下支付' }}</view>
        </view>
        <view class="line"></view>
        <view class="item">
          <view class="label">收货信息</view>
          <view class="value info">{{orderDetail.orderInfo.consignee}}, {{orderDetail.orderInfo.mobile}}, {{ orderDetail.orderInfo.address }}</view>
        </view>
        <view class="item">
          <view class="label">订单编号</view>
          <view class="value info copyBox" @click="copy">
            <text>{{ orderDetail.orderInfo.orderSn }}</text>
            <text class="copy">复制</text>
          </view>
        </view>
        <view class="item">
          <view class="label">创建时间</view>
          <view class="value info">{{ orderDetail.orderInfo.addTime }}</view>
        </view>
        <view class="item">
          <view class="label">订单状态</view>
          <view class="value">{{ orderDetail.orderInfo.orderStatusText }}</view>
        </view>
        <view class="item flx-start">
          <view class="label">线下付款凭据</view>
          <view class="value images">
            <image v-for="(item,i) in taskList1.list" :key="i" :src="item" mode="aspectFill"></image>
          </view>
        </view>
        <view class="item flx-start">
          <view class="label">线下合同凭据</view>
          <view class="value images">
            <image v-for="(item,i) in taskList2.list" :key="i" :src="item" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="flow-fixed-footer">
    <view class="dis-flex">
<!--      <view class="flow-btn btn1" :class="{ disabled }" v-if="orderDetail.orderInfo.handleOption.refund" @click="refund">申请退款</view>-->
      <view class="flow-btn" :class="{ disabled }" v-if="orderDetail.orderInfo.handleOption.confirm" @click="confirm">确认收货</view>
      <view class="flow-btn" v-if="orderDetail.orderInfo.orderStatus != 204 && orderDetail.orderInfo.signStatus == 1" @click="createSignTask">去签署</view>
      <view class="flow-btn" v-if="orderDetail.orderInfo.orderStatus != 204 && orderDetail.orderInfo.signStatus == 2 && taskList2.length == 0" @click="signTask">继续签署</view>
      <view class="flow-btn" v-if="orderDetail.orderInfo.orderStatus != 204 && orderDetail.orderInfo.signStatus == 3 && taskList2.length == 0" @click="signTask">签署详情</view>
      <view class="flow-btn" v-if="taskList1.status == 3" @click="edit1">修改支付凭据</view>
      <view class="flow-btn" v-if="taskList2.status == 3" @click="edit2">修改合同凭据</view>
<!--      <view class="flow-btn" v-if="orderDetail.orderInfo.orderStatus == 401" @click="goInvoicing()">申请开票</view>-->
    </view>
  </view>
  </template>
  <template v-else>
    <u-loading-icon ></u-loading-icon>
  </template>
</view>
</template>

<script>
import authMixins from "@/common/authSignTask.mixins.js";
export default {
  data(){
    return {
      orderId: null,
      disabled:false,
      orderDetail:null,
      taskList1:{
        list:[],
      },
      taskList2:{
        list:[],
      },
      loading:true
    }
  },
  mixins: [authMixins],
  onLoad(options) {
    this.orderId = parseInt(options.orderId)
    // 加载页面数据
    this.onRefreshPage()
  },
  methods:{
    onRefreshPage(){
      this.$request.get('wx/order/detail', {orderId:this.orderId}).then(({data}) => {
        if(data.taskList && data.taskList.length > 0){
          let taskList1 = data.taskList.find(item=>item.taskType === 1)
          this.taskList1 = taskList1
          if(taskList1 && taskList1.fileUrls && taskList1.fileUrls.indexOf('file1') > -1){
            this.taskList1.list = Object.values(JSON.parse(taskList1.fileUrls))
          }
          let taskList2 = data.taskList.find(item=>item.taskType === 2)
          this.taskList2 = taskList2
          if(taskList2 && taskList2.fileUrls && taskList2.fileUrls.indexOf('file1') > -1){
            this.taskList2.list= Object.values(JSON.parse(taskList2.fileUrls))
          }
        }else{
          this.taskList1 = {
            list:[],
            status:0
          }
          this.taskList2= {
            list:[],
            status:0
          }
        }
        this.orderDetail = data;
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.loading = false;
      })
    },
    copy(){
      const app = this;
      uni.setClipboardData({
        data: app.orderDetail.orderInfo.orderSn,
        success: function () {
          app.$toast({title:'复制成功',icon:'success',duration:1000})
        }
      });
    },
    createSignTask(){
      this.sign(this.orderDetail.orderInfo.id);
    },
    signTask(){

      this.getSignUrl(this.orderDetail.orderInfo.id)
    },
    confirm(){
      const app = this
      uni.showModal({
        title: "提示",
        content: "确认收货吗?",
        success({ confirm }) {
          confirm && app.onConfirm()
        }
      });
    },
    onConfirm(){
      if(this.disabled){
        return;
      }
      this.disabled = true;
      this.$request.post('wx/order/confirm', {orderId:this.orderDetail.orderInfo.id}).then(({data}) => {
        this.$toast('确认收货成功')
        this.onRefreshPage();
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.disabled = false;
      })
    },
    refund(){
      console.log(111)
    },
    edit1(){
      this.$navTo('page_work/offlinePlay/index',{orderId:this.orderId,isPay:true,actualPrice:0,type:'edit'})
    },
    edit2(){
      this.$navTo('page_work/offlinePlay/index',{orderId:this.orderId,isPay:false,actualPrice:0,type:'edit'})
    },
    goInvoicing(){
      this.$navTo('page_work/user/invoicing', {orderId:this.orderId})
    },
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 30rpx;
  background: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
  .box{
    border-radius: 10rpx;
    background: #FFF;
    padding: 30rpx 20rpx;
    padding-bottom: 100rpx;
    margin-bottom: 100rpx;
    .goods{
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-bottom: 40rpx;
      .goodsImage{
        width:172rpx;
        height:172rpx;
        border-radius: 16rpx;
        overflow: hidden;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .goodsInfo{
        flex:1;
        .goodsName{
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          line-height: 40rpx;
          font-weight: 500;
          color: #242323;
          margin-bottom: 40rpx;
          .price{
            font-size: 28rpx;
            font-weight: bold;
            color: #242323;
          }
        }
        .goodsSpec{
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          line-height: 40rpx;
          font-weight: 400;
          color: #666464;
          .integral{
            font-size: 20rpx;
            line-height: 30rpx;
            font-weight: 400;
            color: #6E4FF6;
            border: solid 1px #6E4FF6;
            border-radius: 8rpx;
            padding: 4rpx 8rpx;
            margin-top: 10rpx;
          }
          .number{
            font-size: 28rpx;
            font-weight: 500;
            color: #242323;
          }
        }
      }
    }
    .line{
      width: 100%;
      height: 1rpx;
      background: #ECECEC;
    }
    .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      .label{
        font-size: 28rpx;
        font-weight: 500;
        color: #242323;
        margin-right: 100rpx;
      }

      .value{
        text-align: right;
        flex: 1;
        font-size: 28rpx;
        font-weight: bold;
        color: #242323;
      }
      .images{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 20rpx;
        image{
          width: 160rpx;
          height: 160rpx;
        }
      }
      .red{
        color: #FB1F1E;
      }
      .info{
        color:#A8A5A5;
        font-weight: unset;
      }
      .copyBox{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .copy{
          font-size: 28rpx;
          font-weight: 500;
          color: #242323;
          padding-left: 12rpx;
        }
      }
    }
    .flx-start{
      align-items: flex-start;
    }
  }
  .flow-fixed-footer {
    position: fixed;
    bottom: var(--window-bottom);
    left: var(--window-left);
    right: var(--window-right);
    // width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 11;
    padding: 16 rpx;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: calc(constant(safe-area-inset-bottom) + var(--window-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--window-bottom));
    .dis-flex{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding:40rpx 30rpx;
      gap:20rpx;
      .flow-btn{
        font-size: 28rpx;
        font-weight: 400;
        color: #FB1F1E;
        border: 1px solid #FB1F1E;
        border-radius: 32rpx;
        padding: 10rpx 20rpx;
      }
      .btn1{
        color: #242323;
        border: 1px solid #A8A5A5;
      }
      .disabled{
        opacity: 0.6;
      }
    }
  }
}
</style>